<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header">
        <div class="header-text">推荐阅读</div>
      </div>
      <div class="blog-list">
        <div
          v-for="(item, index) in dataPage"
          :key="index"
          class="blog-container"
          @click="toInfo(item.blogId)"
        >
          <div class="blog-title">
            {{ item.blogTitle }}
          </div>

          

          <div class="meta">
            <div class="type">
            分类：<el-tag type="success">{{ item.typeName }}</el-tag>
            </div>
            <div class="time">{{ item.created_time }}</div>
            <div class="meta-container">
              <span
                class="meta-item"
              ><i class="el-icon-view" /> {{ item.blogRead }}
              </span>
              <span
                class="meta-item"
              ><i class="el-icon-star-off" /> {{ item.blogCollection }}
              </span>
              <span
                class="meta-item"
              ><i class="el-icon-lollipop" /> {{ item.blogGoods }}
              </span>
              <span
                class="meta-item"
              ><i class="el-icon-chat-round" /> {{ item.blogComment }}
              </span>
            </div>
          </div>
          <el-divider />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getByPage } from '@/api/blog'

export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 5,
        // 排序列
        sortColumn: 'blog_read'
      },
      dataPage: {}
    }
  },
  created() {
    this.getByPage()
  },
  methods: {
    getByPage() {
      getByPage(this.params).then((res) => {
        this.dataPage = res.data
      })
    },
    // 跳转到详情
    toInfo(id) {
      this.$router.push('/blogInfo/' + id)
    }
  }
}
</script>

<style src="./recommend.css" scoped>
</style>
